require(['./config'], function() {
	require(['jquery', 'template', 'loadHF'], function($, template) {
		// 购物车类
		class Cart {
			constructor() {
				// 购物车数组
				this.cart = JSON.parse(localStorage.cart) || []

				this.initCart()
				this.addListener()
				this.calcTotalPrice()
			}

			// 初始化渲染购物车
			initCart() {
				// 如果购物车为空，则显示为空的提示信息
				if (this.cart.length === 0){
					$('.cart-empty').show()
								.next().hide()
					return
				}
				// 购物车非空
				$(".cart-empty").hide()
							.next().removeClass("cartprod")
				// 渲染显示购物车内容
				const html = template("cart-template", {cart: this.cart})
				$(".cart-item").html(html)
				
				const html2 = template("cart-template2", {cart: this.cart})
				$(".cart-item1").html(html2)								
			}

			// 添加事件监听
			addListener() {
				// 删除
				$(".cart-item").on("click", ".btn-delete", this.removeHandler.bind(this))
				// 加减数量
				$(".cart-item").on("click", ".btn-increase, .btn-decrease", this.modifyHandler.bind(this))
				// 输入修改数量
				$(".cart-item").on("blur", ".prod-amount", this.modifyHandler.bind(this)) 
			}

			// 删除处理
			removeHandler(e) {
				// 获取待删除的行
				const _tr = $(e.target).parents("tr")
				// 获取待删除行中商品的id
				const _id = _tr.data("id")
				console.log(_id)
				// 从购物车数组中删除该 id 对应的商品元素
				this.cart = this.cart.filter(curr => curr.id != _id) 
				// function(curr) {return curr.id != _id}
				// 从存储的结果中移除行所对应表示的商品
				localStorage.cart = JSON.stringify(this.cart)
				// 从DOM树中删除行
				_tr.remove()
				
				location.reload()
				
				this.calcTotalPrice()
			}

			// 修改数量处理
			modifyHandler(e) {
				// 获取待修改数量的行
				const _tr = $(e.target).parents("tr")
				// 获取待修改的商品id
				const _id = _tr.data("id")
				
				// 将购物车数组中对应元素数量更新
				const prod = this.cart.find(curr => curr.id == _id) // 数组中存在的对应元素
				
				if ($(e.target).is(".btn-increase")) { // 加
					
					prod.amount += 1
				} else if ($(e.target).is(".btn-decrease")) { // 减
					if (prod.amount <= 1)
						return
					prod.amount -=1
				} else if($(e.target).is(".prod-amount")) { // 输入修改数量
					// 获取输入的值
					const _val = $(e.target).val()
					// 判断输入是否合法
					if (!/^[1-9]\d*$/.test(_val)) { // 输入不是整数数字，则将数量还原为原始数量值
						$(e.target).val(prod.amount)
						return
					}
					prod.amount = Number(_val)
				}
				// 保存到 localStorage
				localStorage.cart = JSON.stringify(this.cart)
				// 更新显示修改后的数量及小计
				_tr.find(".prod-amount").val(prod.amount)
				_tr.find(".p-subtotal").text((prod.amount * prod.price).toFixed(2))
				
				
				this.calcTotalPrice()
			}


			// 计算合计金额
			calcTotalPrice() {
				let sum = 0,
					trlist=document.querySelectorAll(".suball");
				for(let i=0,len=trlist.length;i<len;i++){
					sum +=Number(trlist[i].innerText)
				}
				$(".total-price").text(sum.toFixed(2))
			}
		}

		new Cart()
	})
})

